<!--  -->
<template>
  <div class='cityConfigArea'>
      <div class="cityConfigArea_circleLine">
          <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-面积</span>
          <Button class="cityConfigArea_alertMessButton" type="primary" @click="circleLineAdd('area')">新增/编辑</Button>
          <div>
              <span v-for="(item,index) in allSelectList.area" :key="index"  class="cityConfigArea_circleLine_span">
                  {{item.start == 0?`${item.end}㎡以下`:item.end >= '99999999'?`${item.start}㎡以上`:`${item.start}-${item.end}㎡`}}
               </span>
          </div>
      </div>
       <div class="cityConfigArea_circleLine">
          <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-均价</span>
          <Button class="cityConfigArea_alertMessButton" type="primary" @click="circleLineAdd('averagePrice')">新增/编辑</Button>
          <div>
              <span v-for="(item,index) in allSelectList.averagePrice" :key="index"  class="cityConfigArea_circleLine_span">
                  {{item.start == 0?`${item.end}元/㎡以下`:item.end >= '99999999'?`${item.start}元/㎡以上`:`${item.start}-${item.end}元/㎡`}}
              </span>
          </div>
      </div>
       <div class="cityConfigArea_circleLine">
          <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-总价</span>
          <Button class="cityConfigArea_alertMessButton" type="primary" @click="circleLineAdd('totalPrice')">新增/编辑</Button>
          <div>
              <span v-for="(item,index) in allSelectList.totalPrice" :key="index"  class="cityConfigArea_circleLine_span">
                  {{item.start == 0?`${item.end}万元以下`:item.end >= '99999999'?`${item.start}万元以上`:`${item.start}-${item.end}万元`}}
              </span>
          </div>                                                                                                                                                             
      </div>
       <div class="cityConfigArea_circleLine">
          <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-更多筛选选择（C-APP）</span>
          <Button class="cityConfigArea_alertMessButton" type="primary" @click="moreSelect">新增/编辑</Button>
          <div>
              <span v-for="(item,index) in allSelectList.moreOthers" :key="item.id" @mouseover="mouseEven(allSelectList.moreOthers,index,true)" @mouseleave="mouseEven(allSelectList.moreOthers,index,false)" class="cityConfigArea_circleLine_span more-span">
                  {{item.paramValues.value}}
                  <span class="more-span-deleIocn" v-if="item.hover"  >
                     <Icon color="white" size="24" type="md-close-circle" @click="deleMoreSpan(index)" />
                  </span>
              </span>
          </div>
      </div>
      <!--新增编辑 -->
      <Modal v-model="checkMoudle" :title="`新增${currentMess.name}`" width="600px">
         <div v-for="(item,index) in currentMess.list" :key="index">
              <div>
                 <span class="circleLineModal_name">{{currentMess.name}}：</span>
                 <Input type="number" :disabled="index==0"  v-model="item.start" placeholder="请输入" class="circleLineModal_select"></Input>
                 <span class="circleLineModal_cut">~</span>
                 <Input type="number" v-if="item.end < 99999999" :disabled="item.end == 99999999" placeholder="请输入" v-model="item.end" class="circleLineModal_select"></Input>
                 <Input type="text" v-else :disabled="item.end >= 99999999" value="以上"  class="circleLineModal_select"></Input>
                 <span class="circleLineModal_unit">{{currentMess.unit}}</span>
                 <Icon v-if="index>0 && index<currentMess.list.length-1" type="md-close-circle" size="22" color="red" @click="currentMess.list.splice(index,1)" />
              </div>
        </div>
        <Button type="primary" @click="currentMess.list.splice(currentMess.list.length-1,0,{start:'',end:''})">新增</Button>
        <span v-if="checkMoudleError" class="circleLineModal_errorMess">提示： {{checkMoudleErrorMess}}</span>
        <div slot="footer">
           <Button class="cityConfigArea_cancelButton" @click="checkMoudle = false">取消</Button>
           <Button type="primary" @click="addAreaSubmit()">确定</Button>
        </div>
      </Modal>
      <!-- 新增更对筛选 -->
      <Modal v-model="addMoreModal" width="500" title="更多筛选添加" :footer-hide='true'>
         <div>
           <Form ref="formValidate" :model="addMoreMess" :rules="ruleValidate" :label-width="120">
                <FormItem label="标签名称" prop="tagName">
                     <Select v-model="addMoreMess.tagName" placeholder="请选择" multiple class="cityConfigArea_moudle_select">
                        <Option v-for="item in MoreSelectList" :key="item.baseTagsId" :value="item.baseTagsName">{{item.baseTagsName}}</Option>
                    </Select>  
                </FormItem>
                <FormItem class="cityList_moudle_footer">
                    <Button class="cityConfigArea_cancelButton" @click="addMoreModal = false">取消</Button>
                    <Button type="primary" @click="addMoreSubmit('formValidate')">确定</Button>
                </FormItem>
            </Form>
        </div>
      </Modal>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import simpleImportcity from "@/components/simple_importcity"
import { getSelectedAllList, getSelectedSaveOrUpdate, getCitytagList} from "@/api/cityConfig"
export default {
components: {draggable, simpleImportcity},
data() {
 const ruleValidateCodeList = (rule, data, callback) =>{
     console.log(65656)
   if(data.length < 1)return callback("请至少选择一个")
   callback()
 }
 return {
     allSelectList:{
       totalPrice:[],
       averagePrice:[],
       area:[],
       moreSelectList:[]
     },
    addMoreMess:{
     tagName:[]
    },
    addMoreModal:false,
    ruleValidate:{
      tagName: [ { validator: ruleValidateCodeList, trigger: 'blur' }],
    },
    selectName:['averagePrice','totalPrice','area','moreOthers'],
    currentMess:{
        list:[]
    },
    checkMoudle:false,
    checkMoudleError:false,
    checkMoudleErrorMess:'',
    MoreSelectList:[]
};
},
computed: {},
watch: {},
methods: {
   //获取列表
   getAllSelectList(){
     getSelectedAllList({cityCode: this.cityCode,platform: 3}).then(res=>{
       console.log("获取筛选列表", res)
       for (const key in res) {
         res[key].map(item=>{ 
           item.start = item.paramValues.start;
           item.end = item.paramValues.end;
         })
         //排序
        res[key] =  res[key].sort((a,b)=>a.end-b.end);
        console.log(' res[key]', res[key])
         this.allSelectList[key] = res[key]
       }
       !res.moreOthers && (this.allSelectList.moreOthers=[]);
       console.log(this.allSelectList)
     })
   },
   //获取标签列表
   getList(){
      getCitytagList({cityCode:this.$route.query.code,baseTagsType:1}).then(res=>{
         console.log("获取列表", res);
          let arr = [],arr1=[];
         for (const key in res) {
           if (res.hasOwnProperty(key)) {
             res[key].forEach(it=> arr.push(it))
           }
         }
          this.allSelectList.moreSelectList.length>0?arr.map(item=>{
            let index = this.allSelectList.moreSelectList.findIndex(mess=>mess.value == item.baseTagsName);
            if(index<0)arr1.push(item)
          }):arr1 = arr;
          this.MoreSelectList = arr1;
      })
   },
  //增加编辑确定
  addAreaSubmit(name){
    //对数据进行校验
    let alertMess="";
    this.checkMoudleError = false;
    this.checkMoudleErrorMess = ""
   
    let {list:arr, type} = this.currentMess;   
     for (var i=0;i<arr.length;i++){ 
       if((i ==0 && arr[i].end>0) || (i>0 && arr[i].start>0 && arr[i].end-0>arr[i].start-0)){
           if(i>0 &&  arr[i].start-0 < arr[i-1].end-0){
               alertMess = "下一个区间段初始值要大于上一个区间段结束值";
               break;
           }
           continue;
       } 
       else {alertMess = "请填写每个区间段数字且结束数值要大于开始的数值";break;}
    } 
    if(alertMess)(this.checkMoudleError = true)&&(this.checkMoudleErrorMess=alertMess); 
    if(!alertMess){
      let searchType = this.selectName.findIndex(item=>item == type)-0+1;
      let params = {
        cityCode: this.cityCode,
        paramValues:arr,
        platform:3,
        searchType
      }
      getSelectedSaveOrUpdate(params).then(res=>{
        this.$Message.success("添加成功");
        this.checkMoudle = false;
        this.getAllSelectList();
      })
    }  
   //this.checkMoudle = false;
  },
   //点击编辑按钮
   addMoreSubmit(mess){
       console.log(999)
       this.$refs[mess].validate((valid)=>{
         if(valid){
             console.log(this.addMoreMess.tagName);
             let paramValues = [],moreSelectList = this.allSelectList.moreSelectList,l=moreSelectList.length;
             this.addMoreMess.tagName.map((item,index)=>paramValues.push({id:index+l,value:item}))
             let params = {
                   cityCode: this.cityCode,
                   paramValues:paramValues.concat(moreSelectList),
                   platform:3,
                   searchType:6
              }
              getSelectedSaveOrUpdate(params).then(res=>{
                this.$Message.success("添加成功");
                this.addMoreModal = false;
                this.$refs[mess].resetFields();
                this.getAllSelectList()
              })
             
         }
       })
    // console.log(mess);
    // // this.currentDate = allSelectList[mess];
    //  console.log(this.currentDate)
    //  this.currentDateDetail = true;
   },
   //编辑确定
   editAreaSubmit(){
     this.$refs[name].validate((valid) =>{
         if(valid){

         }
     })
   },
   //点击筛选更多
   moreSelect(){
     this.getList()
     this.addMoreModal = true;
   },
   //点击新增按钮
   circleLineAdd(name){
     let newArr = JSON.parse(JSON.stringify(this.allSelectList[name]));
     if(newArr.length == 0)newArr=[{start:0,end:''},{start:'',end:999999999}];
     this.currentMess.list = newArr;
     this.currentMess.type = name;
     this.currentMess.name = name =='totalPrice'?'总价':name =='averagePrice'?'单价':'面积';
     this.currentMess.unit = name =='totalPrice'?'万元':name =='averagePrice'?'元/㎡':'㎡';
     this.checkMoudle = true;
   },
   //删除某一个span标签
  deleMoreSpan(index){
   let moreSelectList = this.allSelectList.moreOthers,arr=[];
   moreSelectList.splice(index,1)
   moreSelectList.map(item=>{
     item.paramValues.searchParamId = item.searchParamId;
     arr.push(item.paramValues)
    });
    let params = {
      cityCode: this.cityCode,
      paramValues:arr,
      platform:3,
      searchType:6
     }
     getSelectedSaveOrUpdate(params).then(res=>{
       this.$Message.success("删除成功");
       this.addMoreModal = false;
       this.getAllSelectList()
     })  
  },
  //鼠标移入
  mouseEven(mess,index,flag){
    let data = JSON.parse(JSON.stringify(mess));
    data[index].hover = flag;
    let obj = JSON.parse(JSON.stringify(this.allSelectList));
    obj.moreOthers = data;
    this.allSelectList = obj;
  }
},
beforeCreate(){
  this.cityCode = this.$route.query.code
},
created() {
  this.getAllSelectList();
},
mounted() {

},
}
</script>
<style lang='scss' scoped>
 .cityConfigArea{
   &_circleLine{
      box-shadow: 0px 0px 6px 0px rgba(116,119,121,0.2);
      padding: 8px;
      margin: 20px 0;
      background-color: #f8f8f9; 
      &_span{
       border: 1px solid #ccc;
       padding: 2px 12px;
       margin-right: 8px;
       border-radius: 4px;
       margin-bottom: 9px;
       display: inline-block;
      }
   }
   &_alertMess{
     font-size: 16px;
     font-weight: 700;
     float: left;
     margin-top: 6px;
     .red{
      color: red;
     }
   }
   &_alertMessButton{
       margin: 0 8px 25px 8px;
   }
   &_moudle_select{
     width: 306px;
     margin-right: 10px;
   }
   &_moudle_inputList{
       margin-bottom: 10px;
   }
   &_moudle_icon{
     vertical-align: text-top;  
   }
   
   .pagePublicStyle{
    text-align: right;
    padding: 14px 0;
    margin-right: 30px;
  }
  .totalCount{
    float: left;
    line-height: 34px;
    padding-left: 20px;  
  }
 }
 .cityList_moudle_footer {
     /deep/.ivu-form-item-content{
      text-align: right;
      margin-right: 42px; 
    }
  
}
 .customSortStyle{
    text-align: left;
    .customSortHead, .customSortBody{
        li{
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #EEEEEE;
          div{
      flex: 1;
      text-align: center;
            button{
      margin: 0px 6px;
            }
          }
      div:first-child{
        flex: 0.4;
          }
        }
      }
    .customSortHead li{ padding-bottom: 10px;}
    .customSortBody li{ padding: 10px 0; line-height: 31px;}
    .customSortBody{
      max-height: 400px;
      overflow-y: auto;
      }
    .customSortFoot{
      padding-top: 14px;
      text-align: center;
    }
  }  
  .cityConfigArea_cancelButton{
      margin-right: 6px;
  }
  .circleLineModal{
    &_select{
     width: 200px;
    margin-bottom: 10px;
  }
  &_footer{
      border-top: 1px solid #ccc;
      margin-top: 6px;
      padding-top: 8px;
  }
   &_cut{
     font-size: 22px;
     display: inline-block;
     margin-right: 8px;  
   }
   &_name,&_unit{
     vertical-align: middle;
    height: 32px;
    display: inline-block  
   }
   &_unit{
     margin-right: 10px;
   }
   &_errorMess{
    font-size: 12px;
    color: red;
    font-weight: 700;
    margin-left: 40px; 
   }
  }
  .more-span{
    position: relative;
    cursor: pointer;
    padding: 6px 10px;
    margin-right: 15px;
    &-deleIocn{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.3);
      text-align: center;
      line-height: 35px;
    }
  }
</style>